<template>
	<!-- 内容模板管理 -->
	<el-card class="mod__menu">
		<el-form :inline="true" >
			<el-form-item label="">
				<el-input v-model="state.queryForm.name" placeholder="模板名称" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="default" @click="getDataList()">查询</el-button>
				<el-button type="primary" @click="addOrUpdateHandle(null)">新增模板</el-button>
			</el-form-item>
		</el-form>
		<el-table stripe border :data="state.dataList" style="width: 100%;" row-key="id" >
			<el-table-column type="index" label="序号" width="105" align="center"></el-table-column>
			<el-table-column prop="id" label="模板ID" width="200" align="center"></el-table-column>
			<el-table-column prop="templateName" label="模板名称" align="center"></el-table-column>
			<el-table-column prop="columnId" label="关联栏目id" width="200" align="center"></el-table-column>
			<el-table-column prop="createDate" label="创建时间" width="200" align="center"></el-table-column>
			<el-table-column prop="" label="操作" header-align="center" align="center"  width="300">
				<template #default="scope">
					<el-button type="" @click="addOrUpdateHandle(scope.row)">修改</el-button>
					<el-button type="danger" @click="delColumn(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<br/>
		<el-pagination
			:current-page="state.page"
			:page-sizes="state.pageSizes"
			:page-size="state.limit"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>
		<!-- 弹窗, 新增 / 修改 -->
		<temp-add-update ref="tempAddUpdate" @refreshDataList="getDataList"></temp-add-update>
	</el-card>
</template>

<script lang="ts" setup>
import { onMounted, ref, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import store from '@/store'
import { useCrud } from '@/hooks'
import { IHooksOptions } from '@/hooks/interface'
import TempAddUpdate from './temp-add-update.vue'
import { delArticlemodelApi } from '@/api/cms/template'
import { ElMessage } from 'element-plus/es'
interface User {
	id: number
	page: number
	limit: number
	name: string
	parentId: string
	hasChildren?: boolean
	children?: User[]
}
const state: IHooksOptions = reactive({
	dataListUrl: '/api/cms/template/details/list',
	deleteUrl: '',
	queryForm: {
		name: ''
	},
	isPage: true
})

onMounted(() => {})

// 删除
const delColumn = ids => {
	delArticlemodelApi([ids]).then(res => {
		if (res && res.status == 200) {
			getDataList()
			ElMessage.success('删除成功')
		} else {
			ElMessage.error('删除异常')
		}
	})
}
const tempAddUpdate = ref()
const addOrUpdateHandle = (row?: string) => {
	tempAddUpdate.value.init(row)
}

const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle } = useCrud(state)
</script>

<style lang="scss" scoped>
</style>
